<template>
  <div class="product">
    <div class="product-bg">
      <div class="product-tab">
        <!-- <div class="tab-bg"></div> -->
        <van-tabs
          v-model="current"
          @click="onTabClick"
        >
          <van-tab>
            <div
              class="tab-icon tab-1"
              slot="title"
            >
            </div>
          </van-tab>
          <van-tab>
            <div
              class="tab-icon tab-2"
              slot="title"
            >
            </div>
          </van-tab>
          <van-tab>
            <div
              class="tab-icon tab-3"
              slot="title"
            >
            </div>
          </van-tab>
          <van-tab>
            <div
              class="tab-icon tab-4"
              slot="title"
            >
            </div>
          </van-tab>
        </van-tabs>
      </div>

      <swiper
        ref="mySwiper"
        :options="swiperOptions"
      >
        <swiper-slide>
          <div @click="goDetail(3)">
            <van-image
              class="egg"
              :src="require('../../assets/product/page-1-1.jpg')"
            ></van-image>
          </div>
          <div @click="goDetail(2)">
            <van-image
              class="egg"
              :src="require('../../assets/product/page-1-2.jpg')"
            ></van-image>
          </div>
          <div @click="goDetail(5)">
            <van-image
              class="egg"
              :src="require('../../assets/product/page-1-3.jpg')"
            ></van-image>
          </div>
          <div @click="goDetail(6)">
            <van-image
              class="egg"
              :src="require('../../assets/product/page-1-4.jpg')"
            ></van-image>
          </div>
          <div @click="goDetail(7)">
            <van-image
              class="egg"
              :src="require('../../assets/product/page-1-5.jpg')"
            ></van-image>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div @click="goDetail(1)">
            <van-image
              class="xlement"
              :src="require('../../assets/product/page-2-1.jpg')"
            ></van-image>
          </div>
          <div @click="goDetail(4)">
            <van-image
              class="xlement"
              :src="require('../../assets/product/page-2-2.jpg')"
            ></van-image>
          </div>
        </swiper-slide>
        <swiper-slide>
          <a
            href="https://www.ovuola.com/"
            target="_blank"
          >
            <van-image
              class="ovuola"
              :src="require('../../assets/product/page-3-1.jpg')"
            ></van-image>
          </a>

        </swiper-slide>
        <swiper-slide>

          <a
            href="https://www.lzspr.com/"
            target="_blank"
          >
            <van-image
              class="ovuola"
              :src="require('../../assets/product/page-4-1.jpg')"
            ></van-image>
          </a>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { directive, Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "",
  data() {
    return {
      current: 0,
      active: 0,
      swiperOptions: {
        initialSlide: 0,
        slidesPerView: "auto",
        centeredSlides: true,
        autoplay: false,
        pagination: {
          el: ".swiper-pagination",
        },
        on: {
          slideChangeTransitionEnd: () => {
            this.$nextTick(() => {
              const swiper = this.$refs.mySwiper.$swiper;
              const realIndex = swiper.realIndex;
              this.current = realIndex;
            });
          },
        },
      },
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  methods: {
    goDetail(type) {
      this.$router.push({
        path: "/detail",
        query: {
          type: type,
        },
      });
    },
    onTabClick(name) {
      this.$refs.mySwiper.$swiper.slideTo(name, 1000, false);
    },
  },
};
</script>

<style lang="scss" scoped>
.product {
  &-bg {
    min-height: 562px;
    background: #fff;
    position: relative;
  }
  &-tab {
    position: relative;
    padding: 20px 0;
    margin-top: 10px;
    .tab-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 900;
    }
  }
  .swiper-container {
    padding: 20px 0;
  }
  .swiper-slide {
    width: 255px;
    height: 450px;
    overflow: scroll;
    padding: 15px;
    text-align: center;
    font-size: 4.8vw;
    background: #81ade5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 300ms;
    transition: 300ms;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    box-shadow: 0px 10px 15px 0px rgba(48, 48, 48, 0.2);
    border-radius: 10px;
  }
  .swiper-slide-active {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .xlement {
    height: 180px;
  }
  .egg {
    margin-bottom: 15px;
    height: 130px;
    img {
      width: 100%;
      height: 130px;
    }
  }
  // .ovuola {
  //   height: 163px;
  // }
  .tab-icon {
    width: 60px;
    height: 60px;
  }
  .tab-1 {
    background: url("../../assets/product/tab-1.jpg") no-repeat 0 0 /100% 100%;
  }
  .tab-2 {
    background: url("../../assets/product/tab-2.jpg") no-repeat 0 0 /100% 100%;
  }
  .tab-3 {
    background: url("../../assets/product/tab-3.jpg") no-repeat 0 0 /100% 100%;
  }
  .tab-4 {
    background: url("../../assets/product/tab-4.jpg") no-repeat 0 0 /100% 100%;
  }
}
</style>

<style lang="scss">
.product {
  .swiper-pagination-bullet {
    width: 9px;
    height: 5px;
    border-radius: 5px;
    background-color: rgba($color: #fff, $alpha: 0.5);
  }
  .swiper-pagination-bullet-active {
    width: 25px;
    background-color: rgba($color: #fff, $alpha: 1);
  }

  .van-tabs__wrap {
    overflow: inherit;
  }
  .van-tabs__nav {
    background: none;
    padding: 0 52px;
  }
  .van-tab {
    color: #fff;
    border-radius: 5px 5px 0 0;
    background: rgba($color: #fff, $alpha: 0.2);
    margin-right: 5px;
  }
  .van-tab:nth-child(3) {
    margin-right: 0px;
  }
  [class*="van-hairline"]::after {
    border: none;
  }
  .van-tab--active {
    background-color: #fff;
    color: #4278bc;
  }
  .van-tabs__line {
    width: 60px !important;
    bottom: -10px;
    background: #4278bc;
  }

  /*iPhone XS max 适配*/
  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .fixed-bottom {
      bottom: -50px;
    }
  }

  .van-tabs__line::after {
    position: absolute;
    top: 0;
    left: 20px;
    content: " ";
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #4278bc;
  }
  .van-tab--active {
    .tab-1 {
      background: url("../../assets/product/tab-1-1.jpg") no-repeat 0 0 /100% 100% !important;
    }
    .tab-2 {
      background: url("../../assets/product/tab-2-2.jpg") no-repeat 0 0 /100% 100% !important;
    }
    .tab-3 {
      background: url("../../assets/product/tab-3-3.jpg") no-repeat 0 0 /100% 100% !important;
    }
    .tab-4 {
      background: url("../../assets/product/tab-4-4.jpg") no-repeat 0 0 /100% 100% !important;
    }
  }
}
</style>
